<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/commonTaglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自定义流程图页面</title>
<script type="text/javascript">
$(function(){
	//屏蔽浏览器右键菜单
	document.oncontextmenu = function(){
		return false;
	}
	//点击隐藏右击菜单
	$(document).click(function(event){
		var id=$(event.target).attr("id");
		var parentId=event.target.parentElement.getAttribute("id");
		if(id!="rightClickNode"){
			if(parentId!="rightClickNode"){
				$("#rightClickNode").remove();
			}
		}
	})
})
//开始拖放
function drag(ev){
	ev.dataTransfer.setData("buttonId",ev.target.id);
}
//允许拖放
function allowDrop(ev){
    ev.preventDefault();
}
//拖放完成
function drop(ev){
	var e = ev || window.event;
	var x=e.offsetX;
	var y=e.offsetY;
	ev.preventDefault();
	var buttonId=ev.dataTransfer.getData("buttonId");
	if(buttonId=="start"){
		var id="start_"+new Date().getTime();
		var node=document.createElement('div');
		node.setAttribute("onclick","clickNode(this,event)");
		node.setAttribute("oncontextmenu","rightClickNode(this,event)");
		node.setAttribute("id",id);
		node.setAttribute("ondragstart","drag(event)");
		node.setAttribute("draggable",true);
		node.style.position="absolute";
		node.style.margin="0px";
		node.style.top=y+"px";
		node.style.left=x+"px";
		node.style.width="25px";
		node.style.height="25px";
		node.style.border="1px solid";
		node.style.lineHeight="20px";
		var nodeText=document.createTextNode('开始'); 
		node.appendChild(nodeText);  
		ev.target.appendChild(node);
	}else if(buttonId=="rectangle"){
		var id="rectangle_"+new Date().getTime();
		var node=document.createElement('div');
		node.setAttribute("onclick","clickNode(this,event)");
		node.setAttribute("oncontextmenu","rightClickNode(this,event)");
		node.setAttribute("id",id);
		node.setAttribute("ondragstart","drag(event)");
		node.setAttribute("draggable",true);
		node.style.position="absolute";
		node.style.margin="0px";
		node.style.top=y+"px";
		node.style.left=x+"px";
		node.style.width="25px";
		node.style.height="25px";
		node.style.border="1px solid";
		node.style.lineHeight="20px";
		var nodeText=document.createTextNode('矩形'); 
		node.appendChild(nodeText);  
		ev.target.appendChild(node);
	}else if(buttonId=="line"){
		
	}else if(buttonId=="end"){
		var id="end_"+new Date().getTime();
		var node=document.createElement('div');
		node.setAttribute("onclick","clickNode(this,event)");
		node.setAttribute("oncontextmenu","rightClickNode(this,event)");
		node.setAttribute("id",id);
		node.setAttribute("ondragstart","drag(event)");
		node.setAttribute("draggable",true);
		node.style.position="absolute";
		node.style.margin="0px";
		node.style.top=y+"px";
		node.style.left=x+"px";
		node.style.width="25px";
		node.style.height="25px";
		node.style.border="1px solid";
		node.style.lineHeight="20px";
		var nodeText=document.createTextNode('结束'); 
		node.appendChild(nodeText);  
		ev.target.appendChild(node);
	}else{
		//移动节点
		var node=document.getElementById(buttonId);
		node.style.top=y+"px";
		node.style.left=x+"px";
	}
}
//单击节点
function clickNode(nodeData,ev){
	var e = ev || window.event;
	//获取右键点击坐标
	var x = e.clientX;
	var y = e.clientY;
	drawLine(x,y,x+100,y+100);
	$("#myCanvas").after(point(x,y));
}
//右击
function rightClickNode(nodeData,ev){
	if(document.getElementById("rightClickNode")){
		return;
	}
	var e = ev || window.event;
	//获取右键点击坐标
	var x = e.clientX;
	var y = e.clientY;
	//获取鼠标键位
	var key = e.which;
	//(1:代表左键； 2:代表中键； 3:代表右键)
	if(key == 3){
		var node=document.createElement('ul');
		node.setAttribute("id","rightClickNode");
		node.style.position="absolute";
		node.style.margin="0px";
		node.style.top=y+"px";
		node.style.left=x+"px";
		node.style.width="25px";
		node.style.height="100px";
		node.style.border="1px solid";
		node.style.lineHeight="20px";
		var nodeLi=document.createElement('li');
		nodeLi.setAttribute("onclick","deleteNode('"+nodeData.id+"')");
		nodeLi.style.cursor="Pointer";
		var nodeText=document.createTextNode('删除');
		nodeLi.appendChild(nodeText);
		node.appendChild(nodeLi);
		$("#myCanvas").after(node);
	}
}
//右击删除节点
function deleteNode(id){
	var isDelete=confirm("你确定要删除该节点吗？");
	if(isDelete){
		$("#"+id).remove();
		$("#rightClickNode").remove();
	}
}
//获取鼠标的坐标
function getMousePos(event) {
    var e = event || window.event;
    return {'x':e.screenX,'y':screenY}
}
//画点
function point(x,y){
	var oDiv=document.createElement('div');
	oDiv.style.position='absolute';
	oDiv.style.height='2px';
	oDiv.style.width='2px';
	oDiv.style.backgroundColor='red';
	oDiv.style.left=x+'px';
	oDiv.style.top=y+'px';
	return oDiv;//注意：返回的值是一个dom节点，但并未追加到文档中
}
//画一条直线的方法
function drawLine(x1,y1,x2,y2){
	var x=x2-x1;//宽
	var y=y2-y1;//高
	var frag=document.createDocumentFragment();
	if(Math.abs(y)>Math.abs(x)){//那个边更长，用那边来做画点的依据（就是下面那个循环），如果不这样，
	if(y>0)//正着画线是这样的
	for(var i=0;i<y;i++){
	var width=x/y*i;
	{
	frag.appendChild(point(width+x1,i+y1));
	}
	}
	if(y<0){//有时候是倒着画线的
	for(var i=0;i>y;i--){
	var width=x/y*i
	{
	frag.appendChild(point(width+x1,i+y1));
	}
	}
	}
	}else {
	if(x>0)//正着画线是这样的
	for(var i=0;i<x;i++){
	var height=y/x*i
	{
	frag.appendChild(point(i+x1,height+y1));
	}
	}
	if(x<0){//有时候是倒着画线的
	for(var i=0;i>x;i--){
	var height=y/x*i
	{
	frag.appendChild(point(i+x1,height+y1));
	}
	}
	}
	}
	document.getElementById('myCanvas').appendChild(frag);
	}
</script>
<style type="text/css">
body {
    background: #eeeeee;
    margin: 0;
    padding: 0;
}
ul{
list-style-type:none;
line-height:20px;
padding: 0px 10px
}
li{
margin-top:5px
}
.DDbutton{
line-height:20px;
cursor:pointer;
width:25px;
height:25px;
border:1px solid;
}
</style>
</script>
</head>
<body class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',collapsible:false"  style="height:8%">
    </div>
    <div data-options="region:'west',title:'',split:false" style="width:50px;">
       <ul>
        <li><div class="DDbutton" id="start"ondragstart="drag(event)" draggable="true">开始</div></li>
        <li><div class="DDbutton" id="rectangle" ondragstart="drag(event)" draggable="true">矩形</div></li>
        <li><div class="DDbutton" id="line"ondragstart="drag(event)" draggable="true">线条</div></li>
        <li><div class="DDbutton" id="end" ondragstart="drag(event)" draggable="true">结束</div></li>
     </ul>
    </div>
    <div data-options="region:'east',title:'属性列表',split:false" style="width:200px;"></div>
    <div data-options="region:'center'" style="background:#eee;">
    <div style="width:90%;height:90%;margin:1% auto;background:#fff">
    <div  style="width:100%;height:100%;background:#fff;">
        <div id="myCanvas" style="width:100%;height:100%;background:#fff;"ondragover="allowDrop(event)"ondrop="drop(event)"></div>
    </div>
    </div>
    </div>
</body>
</html>